<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D pathfinding algorithm visualization</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/scripts.js"></script>
</head>
<body>
    <nav class="navbar">
        <div class="inner-width">
          <a href="index.html" class="logo"></a>
          <button class="menu-toggler">
            <span></span>
            <span></span>
            <span></span>
          </button>
          <div class="navbar-menu">
            <a href="index.html">Home</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#">Login</a>
          </div>
        </div>
    </nav>

    <section id="home">
        <div class="inner-width">
          <div class="content">
            <h1></h1>
            <!-- sm null -->
            <div class="buttons">
              <a href="#services">开始体验</a>
            </div>
          </div>
        </div>
      </section>

      <section id="about">
          <div class="inner-width">
              <h1 class="section-title">About</h1>
              <div class="about-content">
                  <img src="images/about.png" alt="" class="about-pic">
                  <div class="about-text">
                    <h2>寻路算法三维可视化交互平台简介</h2>
                    <h3>
                      <span>Greedy</span>
                      <span>Dijkstra</span>
                      <span>A*</span>
                    </h3>
                    <p>
                      本作品是面向编程人员推出的寻路算法三维可视化，目的为直观地帮助使用者解决三维空间的寻路算法问题。本产品摒弃了二维可视化，选择创建三维可视化平台，使寻路算法在三维空间的问题上更好的体现，便于使用者理解原理。
                    </p>
                  </div>
              </div>
          </div>
      </section>


      <section id="services" class="dark">
        <div class="inner-width">
          <h1 class="section-title">Services</h1>
          <div class="services">
            <div class="service">
                <div class="buttons">
                    <a href="#about" class="go">
                        <h4>Greedy</h4>
                        <p>贪心</p>
                    </a>
                </div>
            </div>
    
            <div class="service">
                <div class="buttons">
                    <a href="./demo.html" target="_blank" class="go" >
                        <h4>Dijkstra</h4>
                        <p>迪克斯特拉</p>
                    </a>
                </div>
            </div>
    
            <div class="service">
                <div class="buttons">
                    <a href="#about" class="go">
                        <h4>A-Star</h4>
                        <p>A*</p>
                    </a>
                </div>
            </div>
    
            <div class="service">
                <div class="buttons">
                    <a href="#about" class="go">
                        <h4>Dynamic Programming</h4>
                        <p>动态规划</p>
                    </a>
                </div>
            </div>
    
            <div class="service">
                <div class="buttons">
                    <a href="#about" class="go">
                        <h4>Breadth-first search</h4>
                        <p>广度优先</p>
                    </a>
                </div>
            </div>
    
            <div class="service">
                <div class="buttons">
                    <a href="#about" class="go">
                        <h4>Depth-First Search</h4>
                        <p>深度优先搜索</p>
                    </a>
                </div>
              </div>

              <div class="services-text">
                <br>
                <br>
                <br>
                <br>
                <br>
                <h2>算法简介</h2>
              <br>
              <hr>
              <br>
              <h3>Greedy</h3>
                    <p>
                      贪心算法不从整体最优上加以考虑，其得到的是在某种意义上的局部最优解，其特点是一步一步地进行，常以当前情况为基础根据某个优化测度作最优选择，而不考虑各种可能的整体情况，其省去了为找最优解要穷尽所有可能而必须耗费的大量时间。
                    </p>
                    <br>
                    <br>
                    <h3>Dijkstra</h3>
                    <p>
                      迪克斯特拉算法采用了一种贪心模式，其解决的是有向图中单个节点到另一节点的最短路径问题，其主要特点是每次迭代时选择的下一个节点是当前节点最近的子节点，也就是说每一次迭代行进的路程是最短的。
                    </p>
                    <br>
                    <br>
                    <h3>A-Star</h3>
                    <p>
                      A*算法是启发式搜索算法，启发式搜索即在搜索过程中建立启发式搜索规则，以此来衡量实时搜索位置和目标位置的距离关系，使搜索方向优先朝向目标点所处位置的方向，最终达到提高搜索效率的效果。
                    </p>
                    <br>
                    <br>
                    <h3>Dynamic Programming</h3>
                    <p>
                      动态规划算法的基本思想是将待求解的问题分解成若干个相互联系的子问题，先求解子问题，然后从这些子问题的解得到原问题的解；对于重复出现的子问题，只在第一次遇到的时候对它进行求解，并把答案保存起来，让以后再次遇到时直接引用答案，不必重新求解。
                    </p>
                    <br>
                    <br>
                    <h3>Breadth-first search</h3>
                    <p>
                      广度优先算法的核心思想是从初始节点开始，应用算符生成第一层节点，检查目标节点是否在这些后继节点中，若没有，再用产生式规则将所有第一层的节点逐一扩展，得到第二层节点，并逐一检查第二层节点中是否包含目标节点。
                    </p>
                    <br>
                    <br>
                    <h3>Depth-First Search</h3>
                    <p>
                      深度优先搜索有点类似广度优先搜索，也是对一个连通图进行遍历的算法。它的思想是从一个顶点V0开始，沿着一条路一直走到底，如果发现不能到达目标解，那就返回到上一个节点，然后从另一条路开始走到底，这种尽量往深处走的概念即是深度优先的概念。
                    </p>
              </div>
          </div>
        </div>
      </section>
    
</body>
</html>